import React, { FC } from 'react'
import styled from 'styled-components'
import { IconReturnArrow } from '../Icons/style'
export interface RightWrapProps {
	title: string
	action?: React.ReactNode
	onBack: React.MouseEventHandler
}
const Wrap = styled.div`
	width: 280px;
	height: 100%;
	font-size: 12px;
	color: #4e4e4e;
	.top-title {
		height: 30px;
		margin-bottom: 5px;
		display: flex;
		> .title-text {
			flex: 1;
			display: inline-block;
			line-height: 30px;
			vertical-align: top;
			margin-left: 10px;
			font-weight: bold;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		> .btns {
			// line-height: 30px;
		}
	}
	.body {
		height: calc(100% - 35px);
	}
`
export const RightWrap: FC<RightWrapProps> = (props) => {
	return (
		<Wrap>
			<div className="top-title">
				<IconReturnArrow onClick={props.onBack} />
				<span className="title-text" title={props.title}>
					{props.title}
				</span>
				<div className="btns">{props.action}</div>
			</div>
			<div className="body">{props.children}</div>
		</Wrap>
	)
}
